<template>
    <div>
        <basic-container>
            <UnitTitle title="任务统计" />
            <el-table
                :data="totalTableData"
                :header-cell-style="{
                    background: 'rgb(255, 191, 191)',
                    color: 'rgb(44,44,44)'
                }"
                stripe
                v-loading="loading1"
            >
                <el-table-column label="序号" prop="number" width="70" align="center">
                    <template slot-scope="scope">
                        <span v-text="getIndex(scope.$index)"></span>
                    </template>
                </el-table-column>
                <el-table-column label="任务总人数" prop="counts" align="center"></el-table-column>
                <el-table-column label="完成人数" prop="successCounts" align="center"></el-table-column>
                <el-table-column label="未完成人数" prop="unaccomplishedCounts" align="center"></el-table-column>
                <el-table-column label="点赞数" prop="likeCounts" align="center"></el-table-column>
                <el-table-column label="评论数" prop="commentCounts" align="center"></el-table-column>
            </el-table>
            <UnitTitle title="任务详情" />
            <div class="madp-detail-form">
                <el-form inline>
                    <el-form-item label="姓名:" label-width="50px">
                        <el-input class="madp-input" v-model.trim="searchT" maxlength="20" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch">搜索</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table
                :data="tableList"
                :header-cell-style="{
                    background: 'rgb(255, 191, 191)',
                    color: 'rgb(44,44,44)'
                }"
                stripe
                v-loading="loading2"
            >
                <el-table-column label="序号" prop="number" width="70" align="center">
                    <template slot-scope="scope">
                        <span v-text="getIndex(scope.$index)"></span>
                    </template>
                </el-table-column>
                <el-table-column label="成员" prop="employeeName" align="center"></el-table-column>
                <el-table-column label="发表状态" align="center">
                    <template slot-scope="scope">
                        {{ ['未发表', '已发表'][scope.row.status] }}
                    </template>
                </el-table-column>
                <el-table-column label="点赞数" prop="likeCount" align="center"></el-table-column>
                <el-table-column label="评论数" prop="commentCount" align="center"></el-table-column>
            </el-table>
            <div class="madp-pagination-wrap">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="page.current"
                    :page-sizes="[10, 20, 30, 50, 100]"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                ></el-pagination>
            </div>
        </basic-container>
    </div>
</template>
<script>
import { getTaskInfo, getTaskInfoList } from '@/api/customer/wechat-task';
export default {
    props: ['id'],
    data() {
        return {
            table: {},
            tableList: [],
            // 分页
            page: {
                current: 1, // 当前页
                pageSize: 10,
                total: 0
            },
            totalTableData: [],
            searchT: '',
            loading1: false,
            loading2: false
        };
    },
    created() {
        this.getInfo();
        this.getWechatMomentList();
    },
    methods: {
        getInfo() {
            this.loading1 = true;
            getTaskInfo({ id: this.id })
                .then((res) => {
                    this.loading1 = false;
                    if (res.data.code != 0) return;
                    this.totalTableData = [res.data.data];
                })
                .catch(() => {
                    this.loading1 = false;
                });
        },
        //获取表格序号
        getIndex($index) {
            return (this.page.current - 1) * this.page.pageSize + $index + 1;
        },
        getWechatMomentList(data) {
            if (!data) this.page.current = 1;
            let obj = {
                id: this.id,
                current: this.page.current,
                size: this.page.size,
                name: this.searchT
            };
            this.loading2 = true;
            getTaskInfoList(obj)
                .then((res) => {
                    this.loading2 = false;
                    if (res.data.code != 0) return;
                    this.tableList = res.data.data.records;
                    this.page.total = res.data.data.total;
                })
                .catch(() => {
                    this.loading2 = false;
                });
        },
        handleSizeChange(val) {
            this.page.pageSize = val;
            this.getWechatMomentList(1);
        },
        handleCurrentChange(val) {
            this.page.current = val;
            this.getWechatMomentList(1);
        },
        handleSearch() {
            this.getWechatMomentList();
        }
    }
};
</script>
<style lang="scss" scoped>
// 分页
.madp-pagination-wrap {
    float: right;
    margin: 20px;
}
td {
    width: 100px;
}
.madp-detail-form {
    text-align: right;
}
</style>
